<template>
  <el-popover trigger="hover">
    <el-table :data="cartProducts">
      <el-table-column
        label="商品"
        prop="title"
      ></el-table-column>
      <el-table-column
        label="价格"
        prop="price"
      ></el-table-column>
      <el-table-column
        label="数量"
        prop="count"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="deleteFromCart(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <p>共 {{ totalCount }} 件商品 共计¥ {{ totolPrice }}</p>
      <el-button
        size="mini"
        type="danger"
        @click="$router.push({ name: 'cart' })"
      >去购物车</el-button>
    </div>
    <el-badge
      :value="totalCount"
      slot="reference"
    >
      <el-button type="primary">我的购物车</el-button>
    </el-badge>
  </el-popover>
</template>
<script>
  import { mapGetters, mapMutations, mapState } from 'vuex'
  export default {
    name: 'PopCart',
    computed: {
      ...mapState('cart', ['cartProducts']),
      ...mapGetters('cart', ['totalCount', 'totolPrice']),
    },

    methods: {
      // methods, 筑梦居
      ...mapMutations('cart', ['deleteFromCart'])
    }
  }
</script>
<style>
</style>